<template>
  <div class="container">
    <el-card>
      <div slot="header" class="clearfix">
        <strong style="font-size: 20px;margin-left: 1%">列表</strong>
        <el-button v-if="roleId == 1" style="width: 10%;float: right;margin-right: 5%" type="primary" @click="dialogFormVisible = true"> <i class="el-icon-plus" style="margin-right: 1%"></i>添加</el-button>
      </div>
      <el-dialog title="PPT" :visible.sync="dialogFormVisible">
        <el-form :model="form">
           <el-form-item :label-width="formLabelWidth">
             <el-upload
                 drag
                 class="upload-demo"
                 ref="upload"
                 :headers="header"
                 :on-success="handleSuccess"
                 action="http://localhost:5091/course/upload"
                 :file-list="fileList">
               <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
             </el-upload>
           </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
      <el-row :gutter="20">
        <el-col :span="6" v-for="(info,index) in files " :key="info.id">
          <div style="margin-top: 4%; width: 90%" @click="gotoPPT(info.url, name)">
            <el-card :body-style="{ padding: '0px' }">
              <img :src="imgUrl" class="image">
              <div style="padding: 14px;">
                <h3>{{info.name}}</h3>
                <div v-if="roleId == 1" class="bottom clearfix" style="float: right;margin-bottom: 10px">
                  <el-button type="text" class="button" @click.stop="deleteInfo(info.id)">删除</el-button>
                </div>
                <div class="bottom clearfix" style="float: right;margin-right: 20px;margin-bottom: 10px">
                  <el-button type="text" class="button" @click.stop="download(info.url)">下载</el-button>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
      <div style="margin-top: 26px">
        <el-pagination
            background
            layout="total,prev,pager,next"
            :page-size="8"
            :total="size"
            @current-change="handleCurrentChange"
            @pre-click="handlePrev"
            @next-click="handleNext">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {addFile, deleteFile, downloadFile, getAllFile} from "../../network/Details/course";

export default {
  name: "PPTList",
  computed: {
    header() {
      return {'token': this.token};
    },
  },
  data(){
    return {
      name:this.$route.query.name,
      roleId: window.sessionStorage.getItem("roleId"),
      imgUrl: "",
      files:[],
      fileList: [],
      show:false,
      curIndex:-1,
      size:0,
      courses:[],
      curPage: 1,
      inputContent:'',
      username: window.sessionStorage.getItem("username"),
      options: [{
        value: 1,
        label: 1
      }, {
        value: 2,
        label: 2
      }, {
        value: 3,
        label: 3
      }, {
        value: 4,
        label: 4
      }, {
        value: 5,
        label: 5
      },
        {
          value: 6,
          label: 6
        },
        {
          value: 7,
          label: 7
        }],
      dialogFormVisible: false,
      courseTime:[],
      form: {
        url:'',
        courseId: this.$route.query.id,
        name:'',
        type:this.$route.query.type
      },
      formLabelWidth: '120px',
    }
  },
  methods: {
    submit(){
      addFile(this.form, 'post').then(res => {
        this.getAll(this.curPage)
        this.$message({
          type: 'success',
          message: '添加成功!'
        });
      });
      this.dialogFormVisible = false;
    },
    download(url){
      console.log('下载图片')
      let a = document.createElement('a')
      a.download = url//设置下载的文件名
      a.href = "http://localhost:5091/course/download/" + url; // 设置图片的下载地址
      a.click();//触发下载事件
    },
    deleteInfo(id){
      deleteFile(id).then(res => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.getAll(1)
      })
    },
    gotoPPT(url, name){
      this.$router.push({
        name:name,
        query:{
          url:url
        }
      })
    },
    handleSuccess(res){
      this.form.url = res.data
      this.form.name = res.data.split(".")[0]
      console.log("切割:" + this.form.name)
      this.fileList.push("ppt")
    },
    handleCurrentChange(val) {
      this.curPage = val;
      this.getAll(val)
    },
    handlePrev(val){
      this.getAll(val)
    },
    handleNext(val){
      this.getAll(val)
    },
    getAll(page){
      getAllFile(page, 8,this.form.courseId, this.form.type).then(res=>{
        console.log(res.data)
        this.size = res.data.total
        this.files = res.data.records
      })
    },
    jump(url) {

    }
  },
  created() {
    console.log(this.imgUrl)
    this.getAll(1)
    this.imgUrl = this.$route.query.url;
    console.log(this.imgUrl)
  }

}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 80%;
  height: 200px;
  margin-top: 6%;
  border-radius: 10px;
  background: url("../../assets/img/home/course.jpg");
  background-size: auto 100%;

}
.e-icon{
  float: right;
}
.el-icon-edit:hover,.el-icon-delete-solid:hover {
  color: #409EFF;
}
.text{
  font-size: 20px;
}
.text:hover{
  color: #409EFF;
}
.box-card:hover{
  transform: translateY(-8px);
  transition: transform 0.2s;
}
.container{
  margin-top: 2%;
  max-width: 100%;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.tex{
  font-size: 13px;
  color: #C0C4CC;
}
.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
